<!--
 * @Author       : wfl
 * @LastEditors: wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-20 16:30:37
 * @LastEditTime: 2023-04-14 09:14:10
-->
<script lang="ts" setup name="IkI18nSelector">
import { useI18n } from 'vue-i18n'
import useSettingsStore from '@g/store/modules/settings'
import { getElementLocales } from '@/locales'
import { InjectionI18nTitle } from '@/global/utils/injection-keys'

const { locale } = useI18n()
const route = useRoute()

const settingsStore = useSettingsStore()

const locales = computed(() => getElementLocales())

const generateI18nTitle = inject(InjectionI18nTitle) as Function

function languageCommand(command: string) {
  locale.value = command
  settingsStore.setDefaultLang(command)
  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
    if (route.meta.breadcrumbNeste?.at(-1)?.i18n || route.meta.breadcrumbNeste?.at(-1)?.title)
      settingsStore.setTitle(generateI18nTitle(route.meta.breadcrumbNeste?.at(-1)?.i18n, route.meta.breadcrumbNeste?.at(-1)?.title), false)
  }
  else {
    if (route.meta.i18n || route.meta.title)
      settingsStore.setTitle(generateI18nTitle(route.meta.i18n, route.meta.title), false)
  }
}
</script>

<template>
  <el-dropdown
    v-if="settingsStore.settings.toolbar.enableI18n"
    class="language-container"
    size="default"
    @command="languageCommand"
  >
    <slot></slot>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(item, index) in locales"
          :key="index"
          :disabled="settingsStore.settings.app.defaultLang === item.name"
          :command="item.name"
        >
          {{ item.labelName }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
